<template>
  <!-- 模型统计 -->
  <div class="model-overview">
    <div class="model-total-title">{{ $t('tool.modelManage.modelingStatistics') }}</div>
    <div class="model-total-out">
      <div class="model-total-inner">
        <div class="model-total-number">6</div>
        <div class="model-total-text">{{ $t('tool.modelManage.modelBigType') }}</div>
      </div>
      <div class="model-total-inner">
        <div class="model-total-number">10</div>
        <div class="model-total-text">{{ $t('tool.modelManage.modelTotal') }}</div>
      </div>
      <div class="model-total-inner">
        <div class="model-total-number">15</div>
        <div class="model-total-text">{{ $t('tool.modelManage.modelGroupTotal') }}</div>
      </div>
    </div>
    <!-- <div class="model-total-title">{{ $t('tool.modelManage.modelList') }}</div>
    <DropDownTable :disposition="disposition" :columnData="columnData" :tableData="tableData" :totalItems="totalItems"
      @loadMore="loadMore" @clearData="clearData">
      <template #columns>
        <el-table-column prop="customField" label="备注"></el-table-column>
      </template>
    </DropDownTable> -->
  </div>
</template>

<script>
import DropDownTable from "@/components/DropDownTable/index.vue"
export default {
  data() {
    return {
      disposition: {
        select: true,
        index: true
      },
      columnData: [
        {
          fieldName: "name",
          name: "名称",
          width: 300,
        },
        {
          fieldName: "address",
          name: "详情",
          width: 500,
        },
        {
          fieldName: "date",
          name: "更新时间",
          width: 200,
        },
      ],
      tableData: Array.from({ length: 10 }, (_, index) => ({
        id: index,
        name: `User ${index + 1}`,
        date: `Date ${index + 1}`,
        address: `xxxxxxxxxxxxxxxxxxxxxxx ${index + 1}`,
      })),
      totalItems: 100
    };
  },
  components: { DropDownTable },
  methods: {
    //加载更多数据
    loadMore() {
      const newItems = Array.from(
        { length: 10 },
        (_, index) => ({
          id: this.tableData.length + index,
          name: `User ${this.tableData.length + index + 1}`,
          date: `Date ${index + 1}`,
          address: `xxxxxxxxxxxxxxxxxxxxxxx ${this.tableData.length + index + 1}`,
        })
      );
      this.tableData.push(...newItems);
    },
    // 清空数据
    clearData() {
      this.tableData = Array.from({ length: 10 }, (_, index) => ({
        id: this.tableData.length + index,
        name: `User ${this.tableData.length + index + 1}`,
        date: `Date ${index + 1}`,
        address: `xxxxxxxxxxxxxxxxxxxxxxx ${this.tableData.length + index + 1}`,
      }));
    }
  }
};
</script>

<style lang="scss" scoped>
.model-overview {
  height: 100%;
  padding: 20px;
  overflow: auto;

  .model-total-title {
    font-size: 20px;
    padding-bottom: 10px;
  }

  .model-total-out {
    width: 100%;
    height: 220px;
    display: flex;
    margin-bottom: 10px;

    .model-total-inner {
      border: 1px solid var(--ui-border-color-base);
      background-color: var(--app-nav-bg);
      border-radius: 10px;
      width: 22%;
      margin-left: 9%;
      text-align: center;

      .model-total-number {
        height: 160px;
        font-size: 50px;
        color: var(--app-primary-base);
        font-weight: bold;
        line-height: 160px;
      }

      .model-total-text {
        height: 20px;
        font-size: var(--ui-font-size-title);
        padding-bottom: 20px;
      }
    }
  }
}
</style>